<template>
    <el-form ref="formRef" :model="formData" label-width="120px">
        <!-- 对话配置 -->
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">对话配置</div>
            <el-form-item label="默认智能体" prop="default_bot">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.default_robot"
                        placeholder="请输入智能体编号"
                    />
                </div>
            </el-form-item>
            <el-form-item label="自定义单位" prop="currency_unit">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.currency_unit"
                        placeholder="请输入自定义单位"
                    />
                </div>
            </el-form-item>
            <el-form-item label="对话窗水印" prop="win_watermark">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.win_watermark"
                        placeholder="请输入水印字样"
                    />
                </div>
            </el-form-item>
        </el-card>

        <!-- 对话配置 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">联网搜索</div>
            <el-form-item label="是否开启">
                <div>
                    <el-switch
                        v-model="formData.web_search.status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <div class="form-tips">当状态为关闭时: 用户端将不显示联网搜索按钮</div>
                </div>
            </el-form-item>
            <el-form-item label="搜索通道">
                <div>
                    <el-radio-group v-model="formData.web_search.engine">
                        <el-radio value="zhipu">智谱搜索</el-radio>
                    </el-radio-group>
                    <div class="form-tips">
                        <div class="flex items-center leading-none">
                            <div>相关文档或功能开通地址，点击</div>
                            <a
                                href="https://open.bigmodel.cn/dev/api/search-tool/web-search"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <el-button link type="primary"> 前往开通 </el-button>
                            </a>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="搜索引擎">
                <div class="w-[380px]">
                    <el-select
                        v-model="formData.web_search.zhipu.search_engine"
                        placeholder="请选择引擎"
                        size="large"
                    >
                        <el-option label="智谱基础版搜索引擎" value="search_std" />
                        <el-option label="智谱高阶版搜索引擎" value="search_pro" />
                        <el-option label="jina.ai搜索" value="search_pro_jina" />
                        <el-option label="搜狗搜索" value="search_pro_sogou" />
                        <el-option label="夸克搜索" value="search_pro_quark" />
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item label="接口密钥">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.web_search.zhipu.api_key"
                        placeholder="请输入ApiKey"
                    />
                </div>
            </el-form-item>
            <el-form-item label="所需积分">
                <div class="w-[380px]">
                    <el-input-number
                        v-model="formData.web_search.zhipu.points"
                        :min="0"
                        :max="999999999"
                    />
                </div>
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['setting:ai:dialog:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import aiDialogApi from '@/api/setting/ai/dialog'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    default_robot: '',
    currency_unit: '',
    win_watermark: '',
    ranking_model: '',
    web_search: {
        status: 0,
        engine: 'zhipu',
        zhipu: {
            search_engine: 'search_std',
            api_key: '',
            points: 0
        }
    }
})

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await aiDialogApi.detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await aiDialogApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
